<script setup lang="ts">
import NavigationBar from './components/NavigationBar.vue'
import IndexSwiper from './components/IndexSwiper.vue'
import Categories from './components/Categories.vue'
import ProductContainer from './components/ProductContainer.vue'
import { getBannerList, getCardList } from '@/api'
import type { ICardResponse } from '@/typings/api'

// 轮播图初始变量
let bannerList = ref<string[]>([])
let productList = ref<ICardResponse[]>([])
onLoad(async () => {
  getBannerList().then((res: any) => (bannerList.value = res.data.img_url.split(',').map((item: any) => item.replace('\n', ''))))
  getCardList().then((res:any) => (productList.value = res.data))
})

</script>

<template>
  <view relative w-full>
    <NavigationBar />
    <view style="padding: 25rpx 35rpx 0 35rpx" box-border overflow-hidden>
      <view>
        <IndexSwiper :banner-list="bannerList" />
        <Categories />
        <ProductContainer v-for="item in productList" :key="item.id" :title="item.name" :list="item.product_list" />
      </view>
    </view>
  </view>
</template>
